<template>
	<view>
		<Setps v-if="!titleshow" :num='2' :headtitle='tit[2].name' :tit='tit' />
		<!-- 费用总汇 -->
		<view class="formcard">
			<view class="bodtitle" style="border-bottom: none;">
				<p><b>费用汇总</b></p>
			</view>
			<view class="cost_money">
				<p>报销金额</p>
				<p>补贴金额</p>
				<p>支付金额</p>
			</view>
			<view class="money_num">
				<p>5,042.00</p>
				<p>450.00</p>
				<p>1,042.00</p>
			</view>
		</view>
		<!-- 费用明细 -->
		<view class="formcard">
			<view class="bodtitle" style="border-bottom: none;">
				<p><b>费用明细</b></p>
			</view>
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/jtf.svg" mode="widthFix"></image>
					<p>交通费</p>
				</view>
				<p style='font-weight: bold'><span style='font-size: 18rpx;font-weight:500'>代购机票金额</span><label
						class='moeny'>￥</label><span class='yetext'>4,000.00</span></p>
			</view>
			<!-- //表单 -->
			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				<u-form-item labelWidth="260rpx" label="费用类型" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>

				<u-form-item labelWidth="260rpx" label="去程携程机票金额" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>


				<u-form-item labelWidth="260rpx" label="返程携程机票金额" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>

				<u-form-item labelWidth="260rpx" label="非携程机票金额" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>

				<u-form-item labelWidth="260rpx" label="机票退改签" prop="userInfo.name" ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>

			</u-form>
		</view>

		<!-- 住宿费 -->
		<view class="formcard">
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/zsf.svg" mode="widthFix"></image>
					<p>住宿费</p>
				</view>
				<p><label class='moeny'>￥</label><span class='yetext'>2,689.00</span></p>
			</view>
			<!-- //表单 -->
			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				<u-form-item labelWidth="260rpx" label="是否指定酒店" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>

				<u-form-item labelWidth="260rpx" label="携程酒店费" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>


				<u-form-item labelWidth="260rpx" label="非携程酒店费" prop="userInfo.name" ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>
			</u-form>
		</view>

		<!-- 其他 -->
		<view class="formcard">
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/qt.svg" mode="widthFix"></image>
					<p>其他</p>
				</view>
				<p><label class='moeny'>￥</label><span class='yetext'>325.00</span></p>
			</view>
			<!-- //表单 -->
			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				<u-form-item labelWidth="260rpx" label="包干路费" prop="userInfo.name" borderBottom ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>

				<u-form-item labelWidth="260rpx" label="其他费用" prop="userInfo.name"  ref="item1">
					<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
				</u-form-item>
			</u-form>
		</view>

		<!-- 补助金额 -->
		<view class="formcard">
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/bzje.svg" mode="widthFix"></image>
					<p>补助金额</p>
				</view>
				<p><label class='moeny'>￥</label><span class='yetext'>450.00</span></p>
			</view>
			<!-- //表单 -->

			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				<u-form-item labelWidth="260rpx" prop="userInfo.name" borderBottom ref="item1">
					<!-- 时间选择 -->
					<view>
						<p><label><b>去程</b></label> <span style='padding-left: 50rpx;'>2022-1-22-03 15:30:30</span></p>
					</view>
					<u-icon v-show="!tripshow" @click="tripshow=!tripshow" slot="right" name="arrow-down"></u-icon>
					<u-icon v-show="tripshow" @click="tripshow=!tripshow" slot="right" name="arrow-up"></u-icon>
				</u-form-item>

				<view v-show="tripshow">
					<u-form-item labelWidth="260rpx" label="补贴天数" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="交通补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="中餐补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="晚餐补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="休息日补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>
				</view>

				<!-- 返程时间选择 -->
				<u-form-item labelWidth="260rpx" prop="userInfo.name" ref="item1">
					<view>
						<p><label><b>返程</b></label><span style='padding-left: 50rpx;'>2022-1-22-03 15:30:30</span></p>
					</view>
					<u-icon v-show="!backshow" @click="backshow=!backshow" slot="right" name="arrow-down"></u-icon>
					<u-icon v-show="backshow" @click="backshow=!backshow" slot="right" name="arrow-up"></u-icon>
				</u-form-item>

				<view v-show="backshow">
					<u-form-item labelWidth="260rpx" label="补贴天数" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="交通补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="中餐补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="晚餐补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>

					<u-form-item labelWidth="260rpx" label="休息日补贴" prop="userInfo.name" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="costmodel.userInfo.name">
					</u-form-item>
				</view>
			</u-form>
		</view>

		<!-- 借款金额 -->
		<view class="formcard">
			<view class="bod_cost">
				<view class="bus">
					<p>借款金额</p>
				</view>
				<p><b><label class='moeny'>￥</label><span class='yetext'>6245.00</span></b></p>
			</view>
			<!-- //表单 -->
			<view class="skyb">
				<label class="lab">QB12789654400</label>
				<view class="skyblu">
					<span>费用科室</span>
					<p>新车型推进器</p>
				</view>
				<view class="skyblu">
					<span>预算号名称</span>
					<p>共性费用-差旅费-国内</p>
				</view>
			</view>
		</view>
		<Nextbtn v-show="!titleshow" :next='next' :backtitle='backtitle' :nexttitle='nexttitle' />
	</view>
</template>
<script>
	import Setps from '@/workspaces/tools/setps.vue'
	import Nextbtn from '@/workspaces/tools/nextbtn.vue'
	export default {
		props: ['titleshow'],
		data() {
			return {
				tit: [{
						name: '基本信息'
					},
					{
						name: '行程反馈'
					},
					{
						name: '费用明细'
					},
					{
						name: '确认提交'
					},
				],
				costmodel: {
					userInfo: {
						name: '20000.00'
					}
				},
				rules: {},
				tripshow: true, //去程显示隐藏
				backshow: true, //去程显示隐藏
				backtitle: '上一步(行程反馈)',
				nexttitle: '下一步(确认提交)',
				next: './travelsub'
			}
		},
		created() {
			if (this.titleshow) {
				this.tripshow = false
				this.backshow = false
			}
		},
		methods: {

		},
		components: {
			Setps,
			Nextbtn
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-family: pf;
	}

	.cost_money {
		width: 80%;
		margin: 0 auto;
		background-color: #f7fbff;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
	}

	.money_num {
		background-color: white;
		font-size: 38rpx;
		display: flex;
		justify-content: space-between;
		width: 85%;
		margin: 30rpx auto;

		p {
			font-weight: bold;
		}
	}

	.bod_cost {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		p {
			font-weight: bold;
		}

		label {
			font-weight: bold;
		}
	}

	.bus {
		display: flex;
		flex-direction: row;
		align-items: center;

		p {
			font-size: 32rpx;
			padding-left: 5rpx;
		}

		image {
			width: 50rpx;
		}
	}

	.skyb {
		width: 90%;
		margin: 20rpx auto;
		background: rgb(247, 251, 255);
		padding: 5rpx 10rpx;

		.lab {
			display: block;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #f1f1f1;
		}

		.skyblu {
			display: flex;
			flex-direction: row;
			padding: 20rpx 20rpx;

			span {
				width: 200rpx;
			}

			p {
				margin-left: 30rpx;
			}
		}
	}

	.yetext {
		color: rgb(255, 97, 4);
		font-size: 38rpx;
		padding-right: 5rpx;
	}

	.moeny {
		color: rgb(255, 97, 4);
	}
</style>
